<template>
	<view>
		<view class="block__title">业主欠费</view>
		<view class="cu-form-group">
			<view class="title">物业公司</view>
			{{roomInfo.storeName}}
		</view>
		<view class="cu-form-group">
			<view class="title">小区名称</view>
			{{roomInfo.communityName}}
		</view>
		<view class="cu-form-group">
			<view class="title">小区编号</view>
			{{roomInfo.communityId}}
		</view>
		<view class="cu-form-group">
			<view class="title">房屋编号</view>
			<view>{{roomInfo.roomName}}</view>
		</view>
		<view class="cu-form-group">
			<view class="title">业主</view>
			<view>{{roomInfo.ownerName}}</view>
		</view>
		<view class="cu-form-group">
			<view class="title">欠费金额</view>
			<view>{{roomInfo.oweMoney}}元</view>
		</view>
		<view class="cu-list menu margin-top-sm" v-for="(item,index) in roomInfo.fees" :key="index" :data-item="item">
			<view class="cu-item">
				<view class="content padding-tb-sm flex justify-start">
					<view class="margin-left-sm">
						<view>
							<view class="text-cut" style="width:220px">{{item.feeName}}</view>
							<view class="text-gray text-sm">{{item.endTime}}至{{item.deadlineTime}}</view>
						</view>
					</view>
				</view>
				<view class="action">
					<text class="text-grey text-sm">应缴:￥{{item.feeTotalPrice}}元</text>
				</view>
			</view>
		</view>
		<view class="margin-top">
			<qrcode ref="qrcodeRef"></qrcode>
		</view>
		<view class="text-center">微信扫二维码缴费</view>
	</view>
</template>

<script>
	import {
		queryUserPropertyFee
	} from '@/api/user/userApi.js';
	import qrcode from '@/components/utils/qrcode.vue';

	export default {
		data() {
			return {
				roomInfo: {}
			}
		},
		components:{
			qrcode
		},
		onLoad(options) {
			this.getUserPropertyFee();
		},
		methods: {
			getUserPropertyFee: function() {
				let _that = this;
				queryUserPropertyFee({
					page: 1,
					row: 50
				}).then(_data => {
					_that.roomInfo = _data.data;
					_that.$refs.qrcodeRef.generatorQrcode(_data.data.qrCode);
				}, err => {
					console.error(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.button_up_blank {
		height: 40rpx;
	}
	.cu-list.menu-avatar>.cu-item .content-left {
		left: 30upx;
	}
	
	.cu-list+.cu-list {
		margin-top: 10upx;
	}
	
	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;
	
	}
	
	.cu-btn.sharp {
		border-radius: 0upx;
	}
	
	.line-height {
		line-height: 100upx;
	}
	.sub-info {
		background-color: #fff;
		//margin-top: 0.5upx;
		padding: 15upx;
	
		.sub-info-item {
			width: 45%;
			margin: 10upx 15upx 0upx 15upx;
		}
	}
	
	.bt-height{
		height: 200upx;
	}
</style>